<template>
  <div>
    <section class="G_orderBG ">
      <section class="G_orderBG_body common">
        <aside class="G_orderBG_left">
          <!-- 酒店信息 -->
          <div class="order_hotel_info">
            <div class="G_hotel_info">
              <p class="img_right">
                <img src="https://himg1.qunarzz.com/imgs/202202/22/C.h-ES4TZPMdRL6bZ6Z240.jpg" alt="酒店图片">
              </p>
              <div class="cont">
                <p class="name">北京西直门漫心酒店</p>
                <p class="info">北京海淀区索家坟20号院5号楼</p>
                <p class="bed_type">心怡大床房(钟点房)</p>
                <div class="dec clearFix">
                  <p class="item">床型：<span>大床</span> </p>
                  <p class="item">早餐：<span>无餐食</span> </p>
                  <p class="item">wifi：<span>无wifi</span></p>
                  <p class="item">宽带：<span>无宽带</span></p>
                </div>
              </div>
            </div>
            <div class="order_tips_c">
              <div class="order_tips">
                03月29日18:00前免费取消
              </div>
            </div>
          </div>
          <!-- 入住信息 -->
          <div class="G_formNormal">
            <h2 class="title">入住信息</h2>
            <div class="item clearFix">
              <span>入住日期:</span>
              <span>2023-03-29</span>
            </div>
            <div class="item clearFix">
              <span>房间数量:</span>
              <select>
                <option value="">1间</option>
                <option value="">2间</option>
                <option value="">3间</option>
              </select>
            </div>
            <div class="item clearFix">
              <span>入住人数:</span>
              <select>
                <option value="">1人</option>
                <option value="">2人</option>
                <option value="">3人</option>
              </select>
            </div>
            <div class="item clearFix">
              <span>入住姓名:</span>
              <input type="text" name="" value="" placeholder="1间可填多人姓名">
            </div>
            <div class="item clearFix">
              <span>联系电话:</span>
              <input type="text" name="" value="" placeholder="预定成功会发送信息">
            </div>
            <div class="item clearFix">
              <span class="eat">餐食情况:</span>
              <div class="detail_price">
                <div class="price_item">
                  <p class="price_time">3月29日</p>
                  <div class="price_cont">
                    <p class="words">无餐食</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 预订声明 -->
          <div class="G_notice">
            <p class="title">预订声明</p>
            <p class="info">2023年03月29日18:00前未入住，可免费取消。过时后非因法定原因未入住取消将收取您的全额房费。订单需预订方或酒店确认后生效，如未确认的将全额退款至您的付款账户。</p>
            <p class="info">预订服务由去哪儿网（天津）国际旅行社有限公司提供营业执照，住宿服务由酒店提供。</p>
            <p class="info">点击提交订单表示已阅读并同意 <em>个人信息授权协议</em> 、<em>酒店预订服务协议</em> </p>

          </div>
          <!-- 点击预订 -->
          <div class="G-submit">
            <p class="btn">下一步、支付</p>
          </div>
        </aside>
        <aside class="G_orderBG_right">
          <div class="G_pay_online">
            <!-- 右侧账单标题 -->
            <div class="title clearFix">
              <p class="name">在线付款</p>
              <span class="pay_total">¥200</span>
            </div>
            <!-- 房费 -->
            <div class="item clearFix">
              <span class="room_price_info">房费</span>
              <span class="room_price">¥200</span>
            </div>

            <div class="title clearFix">
              <p class="name">离店送</p>
              <!-- <span class="pay_total">$200</span> -->
            </div>
            <!-- 房费 -->
            <div class="item clearFix">
              <span class="room_price_info">送积分</span>
              <span class="room_price">24积分</span>
            </div>
            <div class="price_detail">
              <p class="fold">单价信息</p>
            </div>
            <!-- 订单编号 -->
            <div class="water-mark">编码：<span>G3Evuvt00</span> </div>
          </div>
        </aside>
      </section>
    </section>
  </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
export default {
  name: 'HotelSystemIndex',
  components: {

    Header,
    Footer

  },
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
html {
  box-sizing: border-box;
}

.common {
  width: 1200px;
  margin: 0 auto;
}

.G_orderBG {
  background-color: #f7f7f7;
  overflow: hidden;

  .G_orderBG_body {
    width: 1200px;
    // overflow: hidden;

    .G_orderBG_left {
      float: left;
      width: 845px;

      // 酒店信息
      .order_hotel_info {
        background: #fff;
        margin-bottom: 15px;
        border-radius: 10px;
        padding: 15px 15px;

        .img_right {
          float: right;
          padding: 20px 20px;

          img {
            border-radius: 5px;
            width: 160px;
            height: 116px;
          }
        }

        // 信息界面
        .cont {
          .name {
            font-size: 20px;
            line-height: 28px;
            margin-bottom: 4px;
            font-weight: bold;
          }

          .info {
            font-size: 14px;
            color: #616161;
            line-height: 20px;
            margin-bottom: 16px;
          }

          .bed_type {
            font-size: 16px;
            line-height: 22px;
            margin-bottom: 6px;
            font-weight: bold;
          }

          .dec {
            margin-bottom: 30px;

            .item {
              float: left;
              margin-right: 30px;
              color: #9e9e9e;
              font-size: 14px;
              line-height: 20px;

              span {
                color: #ff714a !important
              }
            }
          }
        }
      }

      // 订单提示
      .order_tips_c {
        border-top: 1px solid #f0f0f0;

        .order_tips {
          // padding: 10px 30px;
          display: inline-block;
          font-size: 14px;
          color: #08b2cc;
        }
      }

      // 入住信息
      .G_formNormal {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 15px;

        .title {
          font-size: 20px;
          // padding: 30px 30px 15px;
          padding: 15px;
          line-height: 28px;
        }

        .item {
          float: left;
          padding: 15px;

          .eat {
            vertical-align: top;
          }

          .detail_price {
            display: inline-block;
            max-height: 216px;
            width: 334px;
            overflow-y: auto;

            .price_item {
              float: left;
              margin: 0 1px 0 0;
              text-align: center;
              font-size: 12px;

              .price_time {
                width: 78px;
                height: 25px;
                line-height: 25px;
                background: #f0f0f0;
                border-radius: 2px 0 0 0;
                color: #616161;
                margin-bottom: 1px;
              }

              .price_cont {
                width: 78px;
                height: 46px;
                background: #f8f8f8;
                border-radius: 0 0 2px 2px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;

                .words {
                  word-break: keep-all;
                  line-height: 15px;
                }
              }
            }
          }
        }
      }

      // 预定说明
      .G_notice {
        // padding: 30px 30px 0 30px;
        padding: 15px;
        background: #fff;
        border-radius: 10px;

        .title {
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
        }

        .info {
          font-size: 14px;
          line-height: 20px;
          color: #9e9e9e;
          margin-bottom: 15px;

          em {
            color: #08b2cc;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 15px;
          }
        }
      }

      // 支付
      .G-submit {
        padding: 0 30px 30px 30px;

        .btn {
          cursor: pointer;
          margin: 30px auto 0;
          width: 640px;
          height: 60px;
          line-height: 60px;
          border-radius: 35px;
          text-align: center;
          color: #fff;
          background: #ff714a;
          font-size: 20px;
        }
      }
    }

    // 右侧固定栏目
    .G_orderBG_right {
      float: right;
      width: 340px;
      position: fixed;
      right: 10%;

      .G_pay_online {
        padding: 20px;
        background: #fffcf2;
        border-radius: 10px;
        color: #616161;

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;

          .name {
            font-weight: bold;
            color: #212121;
            text-align: center;
            font-size: 15px;
          }

          .pay_total {
            float: right;
            color: #ff714a !important;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
          }
        }

        // 房费
        .item {
          position: relative;
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;

          &::before {
            content: '';
            border: 1px #9e9e9e dotted;
            position: absolute;
            bottom: 6px;
            width: 200px;
            left: 0;
          }

          .room_price_info {
            // display: inline;
            float: left;
            font-size: 14px;
            line-height: 20px;
            background: #fffcf2;
            // padding: 0 13px 0 30px;
            position: relative;
            z-index: 2;
          }

          .room_price {
            // display: inline;
            float: right;
            font-size: 15px;
            line-height: 21px;
            padding: 0 20px;
            padding-left: 30px;
            background: #fffcf2;
            position: relative;
            z-index: 2;
          }
        }

        .price_detail {
          padding: 0 30px;
          border-radius: 0 0 10px 10px;

          .fold {
            font-size: 14px;
            color: #616161;
            line-height: 50px;
            text-align: right;
            cursor: pointer;
          }
        }

        .water-mark {
          padding: 0 13px 12px 30px;
          color: #ddd;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
